<template>
	<div class="container">
		<h3 class="tip gray">确认挂号信息</h3>
		<!-- 就诊人信息 -->
		<el-card class="box-card p-0">
			<template #header>
				<div class="card-header">
					<span>请选择就诊人</span>
					<el-button
						:icon="User"
						type="success"
						@click="() => router.push({ path: '/user/patient', query: { type: 'add' } })"
						>添加就诊人</el-button
					>
				</div>
			</template>

			<div class="visitor_info">
				<Visitor
					v-for="(item, index) in patientinfo"
					:key="item.id"
					:data="item"
					:selected="selectedIndex === index"
					class="visitor"
					@click="changeIndex(index)"
					@edit="() => router.push({ path: '/user/patient', query: { type: 'edit', id: item.id } })" />
			</div>
		</el-card>
		<!-- 医生信息 -->
		<el-card class="box-card" v-if="doctorInfo">
			<template #header>
				<span>挂号信息</span>
			</template>

			<el-descriptions class="register_info" :column="2" border>
				<el-descriptions-item label="就诊日期:"> {{ doctorInfo.workDate }}</el-descriptions-item>
				<el-descriptions-item label="就诊医院:"> {{ doctorInfo.param.hosname }} </el-descriptions-item>
				<el-descriptions-item label="就诊科室:"> {{ doctorInfo.param.depname }} </el-descriptions-item>
				<el-descriptions-item label="医生姓名:"> {{ doctorInfo.docname }} </el-descriptions-item>
				<el-descriptions-item label="医生职称:"> {{ doctorInfo.title }} </el-descriptions-item>
				<el-descriptions-item label="医生专长:"> {{ doctorInfo.skill }} </el-descriptions-item>
				<el-descriptions-item label="医生服务费:">
					<span class="money">{{ doctorInfo.amount }}</span>
				</el-descriptions-item>
			</el-descriptions>
		</el-card>

		<div class="center_box">
			<el-button
				class="confirm_registration"
				type="primary"
				size="large"
				:disabled="selectedIndex === -1"
				@click="confirm">
				确认挂号
			</el-button>
		</div>
	</div>
</template>

<script setup lang="ts">
import { User } from '@element-plus/icons-vue';
import Visitor from '@/components/visitor/index.vue';
import { getPatientInfo, getDoctorInfo } from '@/api/hospital';
import type { Patient, Doctor } from '@/api/hospital/type';
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { submitOrder } from '@/api/user';
import { ElMessage } from 'element-plus';

const route = useRoute();
const router = useRouter();

let patientinfo = ref<Patient[]>([]);
let doctorInfo = ref<Doctor | undefined>();

let selectedIndex = ref(-1);

// 获取某一个账号下就诊人的信息
function getPatientDaat() {
	getPatientInfo().then((res) => {
		if (res.code === 200) {
			patientinfo.value = res.data;
		}
	});
}

function getDoctorData() {
	getDoctorInfo(route.query.docId as string).then((res) => {
		if (res.code === 200) {
			doctorInfo.value = res.data;
		}
	});
}

function changeIndex(i: number) {
	selectedIndex.value = i;
}

function confirm() {
	if (!doctorInfo.value) return;
	// 医院编号
	const hoscode = doctorInfo.value.hoscode;
	// 医生ID
	const scheduleId = doctorInfo.value.id;
	// 就诊人ID
	const patientId = patientinfo.value[selectedIndex.value].id;

	submitOrder(hoscode, scheduleId, patientId).then((res) => {
		if (res.code === 200) {
			router.push({
				path: '/user/order',
				query: {
					orderId: res.data,
				},
			});
		} else {
			ElMessage.error(res.message);
		}
	});
}

getPatientDaat();
getDoctorData();
</script>

<style scoped lang="scss">
.container {
	.box-card {
		margin-top: 40px;
		&.p-0 :deep(.el-card__body) {
			padding-bottom: 0;
		}
		.card-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.visitor_info {
			display: flex;
			flex-wrap: wrap;
			.visitor {
				width: calc(33.33333% - 14px);
				margin-right: 21px;
				margin-bottom: 20px;
				&:nth-child(3n + 3) {
					margin-right: 0;
				}
			}
		}
		.register_info {
			.money {
				color: red;
			}
		}
	}
	.center_box {
		text-align: center;
		padding: 40px;
	}
}
</style>
